<template>
	<view class="img-title-box">
		<view class="list" v-if="list.length!=0">
			<view class="item" v-for="(item,index) in list" @click="handDetails(item)">
				<u-image border-radius='12 12 0 0' :fade="true" duration="450" width="334rpx" height="200rpx" :src="item.titleImg"></u-image>
				<view class="title-text title mt-25">
					{{item.title}}
				</view>
			</view>
		</view>
		<u-empty margin-top='20' font-size='24' icon-size='80' :show='list.length==0' text="暂无热门推荐"></u-empty>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {

			};
		},
		methods:{
			handDetails(item){
				this.$emit('handDetails',item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.img-title-box {
		width: 100%;

		.list {
			@include my-flex($jc: $bs-sb)
		}

		.item {
			box-shadow: 0 0 13px 0 rgba(18, 27, 83, 0.07);
			width: 334rpx;
			border-radius: 12rpx;
			padding-bottom: 26rpx;
			overflow: hidden;

			.title {
				padding: 0 16px;
				@include ellipsisMultiline(2)
			}
		}
	}
</style>
